<template>
	<mescroll-uni
		@init="mescrollInit"
		:height="height"
		:up="upOption"
		@up="getData"
		:down="downOption"
		@down="downRefresh"
		class="mescroll-uni"
		>
		<select-list :datas="datas"></select-list>
	</mescroll-uni>
</template>
<script>
import { mapState, mapMutations } from "vuex"
import selectList from "./select-list.vue"
import { GetProductList } from "@/service/api/baskOrder.js"
export default {
	props: {
	    requestData: {
	        type: Object,
	        default: {},
	    },
		height: {
		    type: String,
		    default: "800px",
		},
	},
    components: {
        selectList,
    },
	computed: {
	    ...mapState("sunbathing", ["selectedSunBathProducts"]),
	},
    data() {
        return {
			datas: [],
			param: {},
            downOption: {
                use: true,
            },
			upOption: {
			    page: {
			        num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
			        size: 10, // 每页数据的数量
			        time: null, // 加载第一页数据服务器返回的时间; 防止用户翻页时,后台新增了数据从而导致下一页数据重复;
			    },
			    textLoading: "加载中 ...", // 加载中的提示文本
			    textNoMore: "-- 没有更多了 --", // 没有更多数据的提示文本
			    empty: {
			        icon: "/static/img/empty.png", // 图标路径 (建议放入static目录, 如 /static/img/mescroll-empty.png )
			        tip: "~ 暂无数据 ~", // 空提示
			    },
			    toTop: {
			        src: false,
			    },
			},
        }
    },
	mounted() {
	    this.refresh(this.requestData)
	},
    methods: {
		getData(page) {
		    let param = this.requestData
		    param.pageSize = page.size
		    param.pageIndex = page.num
		    param.productCategoryId = this.requestData.productCategoryId
		    GetProductList(param).then((res) => {
		        if (res.State == 1) {
		            this.datas = this.datas.concat(res.Data);
					this.datas.forEach(pro => {
					     pro.count = 0
					})
					if(this.selectedSunBathProducts.length > 0){
						this.selectedSunBathProducts.forEach(pro => {
							this.datas.forEach(item => {
							     if(item.ID == pro.ID){
									 item.count = pro.count
								 }
							})
						})
					}
					this.mescroll.endBySize(res.Data.length, res.RecordAmout)
		        } else {
		            this.mescroll.endBySize(0, 0)
		        }
		    })
		},
		//刷新
		refresh(requestData) {
		   this.downRefresh(requestData)
		},
       //刷新
       downRefresh(requestData) {
           this.param = requestData
           this.datas = []
           this.mescroll.resetUpScroll()
       },
    },
}
</script>

<style lang="scss">
.select-list-wrapper {
    padding: 24rpx;
    padding-bottom: 1rpx;
    border-radius: 40rpx 40rpx 0rpx 0rpx;
    background-color: $color-white;
	min-height: 200rpx;
    .list-item {
        display: flex;
        margin-bottom: 24rpx;

        .left {
            width: 180rpx;
            height: 180rpx;
            margin-right: 24rpx;

            .image {
                width: 100%;
                height: 100%;
                border-radius: 8rpx;
            }
        }

        .right {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            .name {
                @include textTwoLine;
            }

            .right-bottom {
                display: flex;
                justify-content: space-between;
                align-items: center;

                .left-area {
                    display: flex;
                    flex-wrap: wrap;
                    align-items: center;
                    .text {
                        font-size: 24rpx;
                        color: $color-orange-1;
                    }
                }

                .item-right {
                    display: flex;
                    flex-direction: column;
                    justify-content: flex-end;
                    align-items: flex-end;

                    .stock-box {
                        margin-top: 14rpx;
                        display: flex;
                        flex-direction: row;
                        width: 100%;
                        align-items: center;

                        .stock-text {
                            display: flex;
                            flex: 1;
                        }
                    }

                    .input-number-box {
                        .btn-input-box {
                            display: block;
                            text-align: center;
                            font-size: $font-size-26;
                            height: auto;
                        }
                        .number-btn {
                            display: flex;
                            justify-content: center;
                            border: none;
                            background-color: none;
                            justify-content: center;
                            align-items: center;
                            position: relative;
                            font-size: 45rpx;
                            line-height: 56rpx;
                            height: 56rpx;
                            width: 56rpx;
                            text-align: center;
                            overflow: hidden;
                            border-radius: 100rpx;
                            display: block;
                            background-repeat: no-repeat;
                            background-size: 100%;
                            background-position: center;

                            &:before {
                                border: none;
                            }

                            &:after {
                                border: none;
                            }
                        }

                        .number-btn-minus {
                            background-image: url(@/static/icon/icon_btn_minus.png);
                        }

                        .number-btn-plus {
                            background-image: url(@/static/icon/icon_btn_plus.png);
                        }
                    }
                }
            }
        }
    }
}
</style>
